<%@ page language="java" contentType="text/html;UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page import="com.bear.model.entity.User" %>
<%@ page import="com.bear.model.entity.plan.*" %>
<%@include file="../base.jsp" %>

<title>计划详情</title>
<script>
function open1(){
	$('#wadddetail').window('open');
	var curr_time = new Date();   
   	var strDate = curr_time.getFullYear()+"-";
    strDate += curr_time.getMonth()+1+"-";
    strDate += curr_time.getDate();
	$("#dodate").datebox("setValue", strDate);   
}
function close1(){
	$('#wadddetail').window('close');
}
function adddetail(){
	if(check())
		{
		$('#mm').submit();
		}
	
}

</script>
</head>
<%List<PlanDetail> details = (List<PlanDetail>)request.getAttribute("details");
	Plan plan = (Plan)request.getAttribute("plan");
%>
<script type="text/javascript">
function check()
{
	var Totalcomplete = <%=plan.getPercent()%>;
	var whatyoudo = $("#whatyoudo").val();
	var complete = $("#complete").val();
	var all = parseInt(Totalcomplete)+parseInt(complete);
	if(complete==null||complete==""||(all>100))
		{
		$("#validateaddlist").html("");
		$("#validateaddlist").html("<font color='red'>百分比填写有误</font>");
		return false;
		}
	else if(whatyoudo==null||whatyoudo=="")
		{
		$("#validateaddlist").html("");
		$("#validateaddlist").html("<font color='red'>详细情况不能为空</font>");
		return false;
		}
	return true;
}
</script>

<style type="text/css">
.det0{
background-color: #FFFFCC;
}
.det1{
background-color: #FFFF99;
}
.load{
width:397px;
height:49px;
background:url('<c:url value="/ico/image/bak.png"/>') no-repeat;
}
.load div{
width:0px;
height:48px;
background:url('<c:url value="/ico/image/pro.png"/>') no-repeat;
color:#fff;
text-align:center;
font-family:Tahoma;
font-size:18px;
line-height:48px;
}

</style>

<body>
<img src="<c:url value="/ico/egg.jpg"/>" height="50"><font class="thick">计划详情</font><br>


<div class="demo-info">
	<div class="demo-tip icon-tip"></div>
	<div>计划的详细情况</div>
</div>		
<a href="<c:url value="/App.html"/>" class="easyui-linkbutton" >首页</a>
<a href="<c:url value="/plan.html"/>" class="easyui-linkbutton" >我的计划</a><br><br>


<div><font color="green" ><strong><%=plan.getDetail() %></strong></font><br>
<div id="loading<%=plan.getId()%>" class="load" ><div>
</div>
</div>
<a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'" onclick="open1()">增加完成度</a>
</div> 
<script>
$("#loading<%=plan.getId()%> > div").css("width", String(<%=plan.getPercent()%>) + "%");
$("#loading<%=plan.getId()%> > div").html(String(<%=plan.getPercent()%>) + "%");

</script>

<%if(details!=null&&details.size()>0){ %>
<%for(int i=0;i<details.size();i++){ %>
<div class="det<%=i%2%>"><font color="#FF6633"><strong>具体内容:</strong></font><%=details.get(i).getWhatyoudo() %>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#FF6633"><strong>时间:</strong></font><%=details.get(i).getDodate() %>&nbsp;&nbsp;&nbsp;&nbsp;完成了:<font color="green"><strong><%=details.get(i).getComplete() %>%</strong></font>
<a href="<c:url value="/plan/deletedetail.html"/>?detailid=<%=details.get(i).getId() %>&planid=<%=plan.getId()%>" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-cancel'">删除</a>
</div>

<%} }else{%>
<font color="green" ><strong>快来完成你的计划吧，尝试增加一条完成度</strong></font>
<%} %>

<div id="wadddetail" class="easyui-window" data-options="title:'添加完成度',closed:true" style="width:300px;height:450px;padding:5px;">
		<div class="easyui-layout" data-options="fit:true">
		<div data-options="region:'center',border:false" style="padding:10px;background:#fff;border:1px solid #ccc;">
			<!-- 表单-->
			<div style="background:#fafafa;padding:10px;width:200px;height:300px;">
	    	<form id="mm" method="post" novalidate action="<c:url value="/plan/adddetail.html"/>">
	    	
	    	<div>
	            <label for="date">日期:<font color="red">*</font></label><br>
	             <input id="dodate" name="dodate" class="easyui-datebox" required="required" name="typestr" data-options="editable:false" ></input> 
	        </div>
			<div>
	            <label for="addlistuse">百分比:<font color="red">*</font></label><br>
	            <input id="complete" name="complete" class="easyui-numberbox" data-options="min:1,max:100,precision:0,required:true" size="15" maxlength="7"/>%
	        </div>
	        <div>
	            <label for="addlistuse">详细情况:<font color="red">*</font></label>
	            <textarea id="whatyoudo" name="whatyoudo" style="height:60px;resize: none;"></textarea>  
	        </div>
	        <input type="hidden" name="planid" value="<%=plan.getId()%>">
	        <div id = "validateaddlist"></div>
	    	</form>
	    	</div>
	    	</div>
	    	<!-- 表单完-->
			<div data-options="region:'south',border:false" style="text-align:right;padding:5px 0;">
				<a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" href="javascript:void(0)" onclick="adddetail()">保存</a>
				<a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" href="javascript:void(0)" onclick="javascript:close1()">取消</a>
			</div>
		</div>
</div>
<script>
$('#dodate').datebox({
    formatter: function(date){ return date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate();},
    parser: function(date){ return new Date(Date.parse(date.replace(/-/g,"/")));}
});
</script>
<%@include file="../botton.jsp" %>
</body>
</html>